<script setup lang="ts">
import EchartsView from "@/components/main/echarts/echarts-view.vue";
import {reactive, toRaw} from "vue";
import {get} from "@/axios";
import UserDateTransform from "@/utils/UserDateTransform.ts";


const iconSize = 65
const createOptions = reactive({});
const banOptions = reactive({});
const delOptions = reactive({});
const dataInfo = reactive({
  userNumber: 0,
  departNumber: 0,
  potsNumber: 0
})
get("/system/system-info").then((res) => {
  if (res.status === 200){
    const data = res.data
    dataInfo.userNumber = data.userNumber
    dataInfo.departNumber = data.departNumber
    dataInfo.potsNumber = data.potsNumber
  }
})
get("/system/create-date-group").then((e: any) => {
  if (e.status == 200) {
    const data = UserDateTransform(e.data)
    Object.assign(createOptions, {
      title: {
        text: "创建用户"
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: data[0]
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: data[1]
        }
      ]
    })
  }
})
get("/system/ban-date-group").then((e: any) => {
  if (e.status == 200) {
    const data = UserDateTransform(e.data)
    Object.assign(banOptions, {
      title: {
        text: "封禁用户"
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: data[0]
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: data[1]
        }
      ]
    })
  }
})
get("/system/del-date-group").then((e: any) => {
  if (e.status == 200) {
    const data = UserDateTransform(e.data)
    Object.assign(delOptions, {
      title: {
        text: "删除用户"
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: data[0]
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: data[1]
        }
      ]
    })
  }
})
// const create= toRaw(createOptions)
</script>

<template>
  <div class="panel-container">
    <div class="system-data-info">
      <div class="card user-info">
        <div class="icon">
          <el-icon :size="iconSize" color="#409EFF">
            <Avatar/>
          </el-icon>
        </div>
        <div class="info user-info-number">
          <span class="title">用户数量:</span>
          <span class="number">{{ dataInfo.userNumber }}</span>
        </div>
      </div>
      <div class="card department-info">
        <div class="icon">
          <el-icon :size="iconSize" color="#95D475">
            <HomeFilled/>
          </el-icon>
        </div>
        <div class="info department-info-number">
          <span class="title">部门数量:</span>
          <span class="number">{{ dataInfo.departNumber }}</span>
        </div>
      </div>
      <div class="card posts-info">
        <div class="icon">
          <el-icon :size="iconSize" color="#F56C6C">
            <Briefcase/>
          </el-icon>
        </div>
        <div class="info department-info-number">
          <span class="title">岗位数量:</span>
          <span class="number">{{ dataInfo.potsNumber }}</span>
        </div>
      </div>
    </div>
    <div class="data-analyses">
      <div class="data-info">
        <div class="user-data">
          <div class="data-card user-create">
            <EchartsView :options="createOptions"></EchartsView>
          </div>
          <div class="data-card user-ban">
            <EchartsView :options="banOptions"></EchartsView>
          </div>
          <div class="data-card user-del">
            <EchartsView :options="delOptions"></EchartsView>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.panel-container {
  width: 100%;
  background-color: #F8F8F8;
}

.system-data-info {
  width: 100%;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  column-gap: 20px;
  row-gap: 10px;
  padding: 20px;
}

.card {
  display: flex;
  padding: 10px 10px;
  align-items: center;
  background-color: white;
  max-width: 180px;
}

.info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-left: 30px;
}

.title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 18px;
}

.number {
  color: #409EFF;
  font-size: 24px;
}

.user-data {
  display: flex;
}

.data-card {
  flex: 1;
  background-color: white;
}
</style>
